<template>
  <div>
    <header>
      <div class="left" @click="back"></div>
      <div class="search">
        <input
          type="text"
          @keyup.13="search_filter"
          @focus="$event.target.style.borderColor = '#2c2c2c'"
          @blur="$event.target.style.borderColor = '#d5d5d5'"
          v-model="name"
        />
      </div>
      <div class="btn">
        <div class="enter" @click="search_filter">搜索</div>
        <div class="cancel" @click="back" v-show="searchList.length == 0">取消</div>
      </div>
    </header>

    <!-- 热门搜索 -->
    <div class="hot_search line" v-show="searchList.length == 0">
      <div class="title">热门搜索</div>
      <div class="content">
        <div class="item" v-for="(vl, i) in hotList" :key="i" @click="toggle">
          {{ vl }}
        </div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="histroy_search" v-show="searchList.length == 0">
      <div class="title">历史搜索</div>
      <div class="content">
        <div
          class="item"
          v-for="(vl, i) in user_histroy"
          :key="i"
          @click="toggle"
        >
          {{ vl }}
        </div>
      </div>
      <div class="clear" v-show="user_histroy.length">
        <div class="text" @click="clear">清除历史记录</div>
      </div>
    </div>

    <shop-list :search-list="searchList" v-show="searchList.length"></shop-list>
  </div>
</template>

<script>
import shopList from "../components/searchLise.vue";
export default {
  data() {
    return {
      hotList: ["HLA", "爆笑虫子", "T恤", "直筒裤", "袜", "长裤"],
      name: "",
      shopList: null, //所有商品列表
      searchList: [], //搜索到的列表
      userInfo: null, //用户信息
      user_histroy: [], //用户搜索历史
    };
  },
  methods: {
    back() {
      this.$router.back();
      this.$emit("show");
    },
    // 修改数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
    // 获取所有商品和用户数据
    getInfoFun() {
      this.shopList = JSON.parse(sessionStorage.getItem("shopList"));
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let user = localStorage.getItem("HL_user");
      this.user_histroy = this.userInfo[user].search;
    },
    // 过滤出要显示的数据
    search_filter() {
      let name = this.name;
      if (name) {
        this.searchList = this.shopList.filter((vl) => vl.title.includes(name));

        if (this.searchList.length == 0) {
          this.$toast({
            message: "暂无该商品",
            position: "bottom",
          });
        }

        this.user_histroy.push(name);
        this.setItem("userInfo", this.userInfo);
      } else {
        this.searchList = [];
        this.$toast({
          message: "暂无该商品",
          position: "bottom",
        });
      }
    },
    // 点击关键词搜索功能
    toggle(e) {
      let name = e.target.innerText;
      if (name) {
        this.searchList = this.shopList.filter((vl) => vl.title.includes(name));

        if (this.searchList.length == 0) {
          this.$toast({
            message: "暂无该商品",
            position: "bottom",
          });
        }
      } else {
        this.searchList = [];
        this.$toast({
          message: "暂无该商品",
          position: "bottom",
        });
      }
    },

    // 清空历史记录
    clear() {
      let user = localStorage.getItem("HL_user");
      this.userInfo[user].search = [];
      this.user_histroy = [];
      this.setItem("userInfo", this.userInfo);
    },
  },
  created() {
    this.$emit("hide");
    this.getInfoFun();
  },
  components: {
    shopList,
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 60px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    position: static;
    margin-left: 14px;
    margin-right: 18px;
  }

  > .search {
    flex: 1;
    display: flex;
    position: relative;

    input {
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      border: 1px solid #d5d5d5;
      padding-left: 35px;
      color: #6a6a6a;
      font-size: 14px;
      font-weight: bold;
    }

    &::after {
      content: "";
      position: absolute;
      left: 9px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 19px;
      height: 19px;
      background: url(../assets/imgs/search_cio.png) no-repeat;
      background-size: contain;
    }
  }

  .btn {
    display: flex;
    font-size: 13px;

    > div {
      padding: 0 10px;
      flex: 1;
    }

    > .enter {
      color: rgb(52, 91, 221);
    }

    > .cancel {
      color: #e64e4e;
    }
  }
}

.histroy_search,
.hot_search {
  padding: 12px;
  position: relative;

  &.line::after {
    content: "";
    position: absolute;
    border-bottom: 1px #b1b1b1 solid;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleY(0.5);
  }

  > .title {
    font-size: 12px;
    line-height: 12px;
  }

  > .content {
    padding: 12px 8px 0px;

    > .item {
      padding: 0 16px;
      margin-right: 8px;
      margin-bottom: 8px;
      display: inline-block;
      font-size: 11px;
      height: 28px;
      line-height: 28px;
      border: 1px solid #f9f9f9;
      background: #f5f5f5;
    }
  }
}

.histroy_search {
  .clear {
    margin-top: 10px;
    position: relative;
    > .text {
      width: 90px;
      font-size: 12px;
      line-height: 12px;
      margin: 0 auto;
      position: relative;
      background: #fff;
      text-align: center;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 168px;
      height: 1px;
      background: #cbcbcb;
    }
  }
}
</style>